<template>
    <div class='box'>
      <!-- 顶部搜索框 -->
      <div class="top">
        <b class="left">
          <van-icon name="arrow-left" @click="goBack"/>
        </b> 
        <div class="search">
            新增地址
        </div>
        <div class="right"><van-icon name="weapp-nav" /></div>
      </div>
      <van-address-edit
        :area-list="areaList" 
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import api from "../http/api.js";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { onMounted, reactive, ref } from "vue";
export default {
  setup(props) {
    const store = useStore();
    const router = useRouter();

    const searchResult = ref([]);

    const onSave = e => {
      // 封装数据
      let obj = {
        cityName: e.city,
        defaultFlag: 0,
        detailAddress: e.addressDetail,
        provinceName: e.province,
        regionName: e.county,
        userName: e.name,
        userPhone: e.tel
      };
      console.log(e,obj, "数据");
      // 请求接口
      Toast("保存成功");
    };
    const onDelete = () => Toast("delete");
    const onChangeDetail = val => {};

    // 返回上一页
    const goBack = () => {
      //   返回上一页
      router.go(-1);
    };
    // 新增地址
    const addRess = () => {
      //   跳转新增地址页面
      router.push("/addhome");
    };
    onMounted(() => {});
    return {
      onSave,
      onDelete,
      areaList,
      searchResult,
      onChangeDetail,
      goBack,
      store,
      router,
      addRess,
      areaList
    };
  }
};
</script>

<style lang='scss'>
.box {
  width: 100%;
  padding-top: 120px;
  // 顶部搜索框
  .top {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    font-size: 28px;
    // 中间搜索框
    .search {
      width: 80%;
      box-sizing: border-box;
      padding: 15px 0;
      height: 70px;
      text-align: center;
    }
  }
  //   底部新增地址
  .btn {
    width: 90%;
    height: 80px;
    color: #fff;
    position: fixed;
    bottom: 20px;
    left: 5%;
    background: #1baeae;
    border: none;
    border-radius: 40px;
  }
  // 底部保存按钮样式
  .van-button--danger {
    background: #1baeae;
    border-color: #1baeae;
  }
  .van-button--default {
    display: none;
  }
  .van-address-edit__default {
    text-align: left;
  }
}
</style>
